<template>
  <div>
    <el-tag
      v-for="tag in tags"
      :key="tag"
      disable-transitions
      closable
      style="color: #121212;"
      @close="removeTag(tag)"
    >{{ tag }}</el-tag>
    <el-input
      v-if="editing"
      v-model="inputValue"
      :placeholder="placeholder"
      :disabled="tags.length >= limit"
      @keyup.enter.native="addTag"
    />
  </div>
</template>

<script>
export default {
  name: 'component-edit-tags',
  props: {
    tags: Array,
    editing: false,
    limit: {
      type: Number,
      default: 8,
    },
  },
  data() {
    return {
      inputValue: '',
    };
  },
  computed: {
    placeholder() {
      return `按回车键添加标签 (${this.tags.length}/${this.limit})`;
    },
  },
  methods: {
    // 回车添加标签
    addTag() {
      if (this.tags.length >= this.limit) return;
      if (this.$va.typeLength(this.inputValue.trim()) > 20) return; // 多于10中文不允许添加
      if (this.tags.includes(this.inputValue.trim())) return;
      this.$emit('update:tags', this.tags.concat([this.inputValue.trim()]));
      this.inputValue = '';
    },
    // 移除标签
    removeTag(tag) {
      this.tags.splice(this.tags.indexOf(tag), 1);
    },
  },
};
</script>

<style></style>
